<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import regexUtil from '../../util/RegexUtil'
import { getUsers, getStudent, getOrganize, setRealName, setPassword, setAvatar } from '../../util/SessionUtil'
import { db } from '../../db/db'
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap'
import { useRouter } from 'vue-router'

const router = useRouter()

const formFirst = ref({
    realName: ''
})
const formFirstErr = ref({
    realName: false
})
const formFirstMsg = ref({
    realName: ''
})

const formSecond = ref({
    realName: '',
    schoolName: '',
    studentNumber: '',
    phoneNumber: '',
    code: '',
    qq: '',
    weixin: ''
})
const formSecondErr = ref({
    realName: false,
    phoneNumber: false,
    code: false
})
const formSecondMsg = ref({
    realName: '',
    phoneNumber: '',
    code: ''
})

const formThird = ref({
    realName: '',
    responsiblePerson: '',
    responsiblePersonPhoneNumber: '',
    code: '',
    address: '',
    businessLicense: ''
})
const formThirdErr = ref({
    responsiblePerson: false,
    responsiblePersonPhoneNumber: false,
    code: false,
    address: false
})
const formThirdMsg = ref({
    responsiblePerson: '',
    responsiblePersonPhoneNumber: '',
    code: '',
    address: '',
})

const formPassword = ref({
    password: '',
    okPassword: ''
})
const formPasswordErr = ref({
    password: false,
    okPassword: false
})
const formPasswordMsg = ref({
    password: '',
    okPassword: ''
})

const users = getUsers()
const usersTypeId = ref(0)
let student: any
let organize: any

onMounted(async () => {

    if (users) {
        usersTypeId.value = users.usersTypeId
        if (users.usersTypeId == 4) {
            student = await getStudent(users.username)
            formSecond.value.realName = users.realName

            const school = await db.school.where('schoolId').equals(student[0].schoolId).toArray()
            formSecond.value.schoolName = school[0].schoolName
            formSecond.value.studentNumber = student[0].studentNumber
            formSecond.value.phoneNumber = student[0].phoneNumber
            formSecond.value.qq = student[0].qq
            formSecond.value.weixin = student[0].weixin
        } else if (users.usersTypeId == 3) {
            formThird.value.realName = users.realName
            organize = await getOrganize(users.username)

            formThird.value.responsiblePerson = organize[0].responsiblePerson
            formThird.value.responsiblePersonPhoneNumber = organize[0].responsiblePersonPhoneNumber
            formThird.value.address = organize[0].address
            formThird.value.businessLicense = organize[0].businessLicense

            const organizeDetail = await db.organizeDetail.where('organizeId').equals(Number(organize[0].organizeId)).toArray()
            if (organizeDetail && organizeDetail.length > 0) {
                formDetail.value.content = organizeDetail[0].content
            }

            const organizeImages = await db.organizeImages.where('organizeId').equals(Number(organize[0].organizeId)).toArray()
            if (organizeImages && organizeImages.length > 0) {
                formDetail.value.imageUrl = organizeImages[0].imageUrl
            }
        } else {
            formFirst.value.realName = users.realName
        }
    }

    fileInput.value?.addEventListener('change', onFileChange)
    customFile.value?.addEventListener('change', onCustomFileChange)
})

function checkRealName(formType: string) {
    if (formType === 'first') {
        formFirstErr.value.realName = false
        formFirstMsg.value.realName = ''
        if (formFirst.value.realName === '') {
            formFirstErr.value.realName = true
            formFirstMsg.value.realName = '姓名不能为空'
            return false
        }
    } else if (formType === 'second') {
        formSecondErr.value.realName = false
        formSecondMsg.value.realName = ''
        if (formSecond.value.realName === '') {
            formSecondErr.value.realName = true
            formSecondMsg.value.realName = '姓名不能为空'
            return false
        }
    }

    return true
}

function checkResponsiblePerson() {
    formThirdErr.value.responsiblePerson = false
    formThirdMsg.value.responsiblePerson = ''
    if (formThird.value.responsiblePerson === '') {
        formThirdErr.value.responsiblePerson = true
        formThirdMsg.value.responsiblePerson = '负责人不能为空'
        return false
    }
    return true
}

async function checkPhoneNumber(formType: string) {
    if (formType === 'second') {
        formSecondErr.value.phoneNumber = false
        formSecondMsg.value.phoneNumber = ''
        if (formSecond.value.phoneNumber === '') {
            formSecondErr.value.phoneNumber = true
            formSecondMsg.value.phoneNumber = '手机号不能为空'
            return false
        } else {
            if (!regexUtil.mobile.test(formSecond.value.phoneNumber)) {
                formSecondErr.value.phoneNumber = true
                formSecondMsg.value.phoneNumber = '手机号11位数字'
                return false
            }

            const tempPn = await db.student.where('phoneNumber').equals(formSecond.value.phoneNumber)
                .and(item => item.username !== users.username).toArray()

            if (tempPn.length > 0) {
                formSecondErr.value.phoneNumber = true
                formSecondMsg.value.phoneNumber = '手机号已被注册'
                return false
            }
        }
    } else if (formType === 'third') {
        formThirdErr.value.responsiblePersonPhoneNumber = false
        formThirdMsg.value.responsiblePersonPhoneNumber = ''
        if (formThird.value.responsiblePersonPhoneNumber === '') {
            formThirdErr.value.responsiblePersonPhoneNumber = true
            formThirdMsg.value.responsiblePersonPhoneNumber = '手机号不能为空'
            return false
        } else {
            if (!regexUtil.mobile.test(formThird.value.responsiblePersonPhoneNumber)) {
                formThirdErr.value.responsiblePersonPhoneNumber = true
                formThirdMsg.value.responsiblePersonPhoneNumber = '手机号11位数字'
                return false
            }

            const tempPn = await db.organize.where('responsiblePersonPhoneNumber').equals(formThird.value.responsiblePersonPhoneNumber)
                .and(item => item.username !== users.username).toArray()

            if (tempPn.length > 0) {
                formThirdErr.value.responsiblePersonPhoneNumber = true
                formThirdMsg.value.responsiblePersonPhoneNumber = '手机号已被注册'
                return false
            }
        }
    }

    return true
}

const axios: any = inject('axios')

const secondVerificationCode = ref('验证码')
const secondVerificationCodeBtnState = ref(false)
const thirdVerificationCode = ref('验证码')
const thirdVerificationCodeBtnState = ref(false)

let randomVc = 0

const count = 120 //间隔函数，1秒执行
let curCount = 0 //当前剩余秒数
let interValObj: any
function obtainCode(formType: string) {

    if (!checkPhoneNumber(formType)) {
        return
    } else {
        let phoneNumber = ''
        if (formType === 'second') {
            phoneNumber = formSecond.value.phoneNumber
        } else if (formType === 'third') {
            phoneNumber = formThird.value.responsiblePersonPhoneNumber
        }

        randomVc = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000
        axios
            .post('/overt/system/sms/verification-code', {
                token: 'bezG5CJQ8DDm',
                phoneNumber: phoneNumber,
                code: randomVc
            })
            .then(function (response: any) {
                if (response.data.state) {
                    curCount = count
                    //设置button效果，开始计时
                    if (formType === 'second') {
                        secondVerificationCodeBtnState.value = true
                        secondVerificationCode.value = curCount + '秒'
                    } else if (formType === 'third') {
                        thirdVerificationCodeBtnState.value = true
                        thirdVerificationCode.value = curCount + '秒'
                    }

                    interValObj = window.setInterval(() => {
                        if (curCount === 0) {
                            window.clearInterval(interValObj) //停止计时器
                            if (formType === 'second') {
                                secondVerificationCodeBtnState.value = false
                                secondVerificationCode.value = '验证码'
                            } else if (formType === 'third') {
                                thirdVerificationCodeBtnState.value = false
                                thirdVerificationCode.value = '验证码'
                            }
                        } else {
                            curCount--
                            if (formType === 'second') {
                                secondVerificationCode.value = curCount + '秒'
                            } else if (formType === 'third') {
                                thirdVerificationCode.value = curCount + '秒'
                            }
                        }
                    }, 1000)
                }
            })
            .catch(function (error: any) {
                console.log(error)
            })
    }


}

function checkCode(formType: string) {
    if (formType === 'second') {
        formSecondErr.value.code = false
        formSecondMsg.value.code = ''

        if (formSecond.value.phoneNumber === student[0].phoneNumber) {
            return true
        }

        if (formSecond.value.code === '') {
            formSecondErr.value.code = true
            formSecondMsg.value.code = '验证码不能为空'
            return false
        } else {
            // if (captchaData.indexOf(form.value.code) < 0) {
            if (randomVc != Number(formSecond.value.code)) {
                formSecondErr.value.code = true
                formSecondMsg.value.code = '验证码错误'
                return false
            }
        }
    } else if (formType === 'third') {
        formThirdErr.value.code = false
        formThirdMsg.value.code = ''

        if (formThird.value.responsiblePersonPhoneNumber === organize[0].responsiblePersonPhoneNumber) {
            return true
        }

        if (formThird.value.code === '') {
            formThirdErr.value.code = true
            formThirdMsg.value.code = '验证码不能为空'
            return false
        } else {
            // if (captchaData.indexOf(form.value.code) < 0) {
            if (randomVc != Number(formThird.value.code)) {
                formThirdErr.value.code = true
                formThirdMsg.value.code = '验证码错误'
                return false
            }
        }
    }

    return true
}

function checkAddress() {
    formThirdErr.value.address = false
    formThirdMsg.value.address = ''
    if (formThird.value.address === '') {
        formThirdErr.value.address = true
        formThirdMsg.value.address = '详细地址不能为空'
        return false
    }
    return true
}

function checkPassword() {
    formPasswordErr.value.password = false
    formPasswordMsg.value.password = ''
    if (formPassword.value.password === '') {
        formPasswordErr.value.password = true
        formPasswordMsg.value.password = '密码不能为空'
        return false
    } else {
        if (!regexUtil.password.test(formPassword.value.password)) {
            formPasswordErr.value.password = true
            formPasswordMsg.value.password = '密码为6~20位字母,数字及特殊字符'
            return false
        }
    }
    return true
}

function checkPasswordBlur() {
    formPasswordErr.value.password = false
    formPasswordMsg.value.password = ''
    if (formPassword.value.password !== '') {
        if (!regexUtil.password.test(formPassword.value.password)) {
            formPasswordErr.value.password = true
            formPasswordMsg.value.password = '密码为6~20位字母,数字及特殊字符'
            return false
        }
    }
    return true
}

function checkOkPassword() {
    formPasswordErr.value.okPassword = false
    formPasswordMsg.value.okPassword = ''
    if (formPassword.value.okPassword === '') {
        formPasswordErr.value.okPassword = true
        formPasswordMsg.value.okPassword = '确认密码不能为空'
        return false
    } else {
        if (!regexUtil.password.test(formPassword.value.okPassword)) {
            formPasswordErr.value.okPassword = true
            formPasswordMsg.value.okPassword = '密码为6~20位字母,数字及特殊字符'
            return false
        }

        if (formPassword.value.password != formPassword.value.okPassword) {
            formPasswordErr.value.okPassword = true
            formPasswordMsg.value.okPassword = '密码不相同'
            return false
        }
    }
    return true
}

function checkOkPasswordBlur() {
    formPasswordErr.value.okPassword = false
    formPasswordMsg.value.okPassword = ''
    if (formPassword.value.okPassword !== '') {
        if (!regexUtil.password.test(formPassword.value.okPassword)) {
            formPasswordErr.value.okPassword = true
            formPasswordMsg.value.okPassword = '密码为6~20位字母,数字及特殊字符'
            return false
        }

        if (formPassword.value.password != formPassword.value.okPassword) {
            formPasswordErr.value.okPassword = true
            formPasswordMsg.value.okPassword = '密码不相同'
            return false
        }
    }
    return true
}

const submitForm = (formType: string) => {

    if (!checkRealName(formType)) {
        return false
    }

    if (formType === 'third') {
        if (!checkResponsiblePerson()) {
            return false
        }
    }

    if (!checkPhoneNumber(formType)) {
        return false
    }

    if (!checkCode(formType)) {
        return false
    }

    if (formType === 'third') {
        if (!checkAddress()) {
            return false
        }
    }



    if (users) {
        if (users.usersTypeId == 4) {
            setRealName(formSecond.value.realName)
            db.users.where('username').equals(users.username).modify({ realName: formSecond.value.realName })
            db.student.where('username').equals(users.username).modify({
                phoneNumber: formSecond.value.phoneNumber,
                qq: formSecond.value.qq,
                weixin: formSecond.value.weixin
            })

        } else if (users.usersTypeId == 3) {
            setRealName(formThird.value.realName)
            db.users.where('username').equals(users.username).modify({ realName: formThird.value.realName })
            db.organize.where('username').equals(users.username).modify({
                responsiblePerson: formThird.value.responsiblePerson,
                responsiblePersonPhoneNumber: formThird.value.responsiblePersonPhoneNumber,
                address: formThird.value.address
            })

        } else {
            setRealName(formFirst.value.realName)
            db.users.where('username').equals(users.username).modify({ realName: formFirst.value.realName })
        }
    }

    $('#successModal').modal('show')
}

const submitPasswordForm = () => {
    if (!checkPassword()) {
        return false
    }

    if (!checkOkPassword()) {
        return false
    }

    if (users) {
        setPassword(formPassword.value.password)
        db.users.where('username').equals(users.username).modify({ password: formPassword.value.password })
    }

    $('#successModal').modal('show')
}

const refreshPage = () => {
    $('#successModal').modal('hide')
    router.go(0)
}


interface FileWithURL {
    file: File
    url: string
}

const fileInput = ref<HTMLInputElement>()
const fileMap = ref(new Map<string, FileWithURL>())

/**
 * 当 input[type='file'] 变化，即用户选择了文件的使用，将其以文件名为 key ，暂时保存在 fileMap 中；
 * 注意， input 上的 files 属性，只保存用户打开了文件选择框，并且选择了文件后，这一时刻的文件
 * 也就是说，用户每次选择执行的都是 replace 的操作，因此，我们使用 map 来维护用户多次选择的所有文件，以及一些手动删除的操作
 */
const onFileChange = function (this: HTMLInputElement) {
    const files = this.files || []
    for (const file of files) {
        const url = URL.createObjectURL(file)
        fileMap.value.set(file.name, { file, url })


        fileToBase64(file, function (base64: any) {
            users.avatar = base64
            db.users.where('username').equals(users.username).modify({ avatar: base64 })
            setAvatar(base64)
        });

    }
}

const onCustomFileChange = function (this: HTMLInputElement) {
    const files = this.files || []
    for (const file of files) {
        fileToBase64(file, function (base64: any) {
            formDetail.value.imageUrl = base64
        });

    }
}

function fileToBase64(file: any, callback: any) {
    const reader = new FileReader();
    reader.onload = function (event: any) {
        callback(event.target.result);
    };
    reader.readAsDataURL(file);
}

/** 点击模拟的文件选择触发按钮，触发真实的文件选择的响应事件 */
const clickFileIput = () => {
    fileInput.value?.click()
    $('#fileModal').modal('hide')
}


const fileType = () => {
    $('#fileModal').modal('show')
}

const toCapture = () => {
    initCamera()
    $('#fileModal').modal('hide')
    $('#captureModal').modal('show')
}

const initCamera = () => {
    // 检查浏览器是否支持getUserMedia API
    if (navigator.mediaDevices.getUserMedia) {
        // 设置拍照参数
        const constraints = {
            video: {
                width: 800,
                height: 400
            }
        };

        // 获取视频流
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream: any) {
                // 将视频流设置为video元素的源
                const video: any = document.querySelector('#videoEle')
                if (video) {
                    if ("srcObject" in video) {
                        video.srcObject = stream
                    } else {
                        // 老的浏览器可能没有srcObject
                        video.src = window.URL.createObjectURL(stream)
                    }
                    video.play() // 播放视频
                }

            })
            .catch(function (error) {
                console.log("获取摄像头错误：", error)
            });
    } else {
        alert("你的浏览器不支持摄像头调用");
    }
}


const captureButton = () => {
    const video: any = document.querySelector('#videoEle')
    const canvas: any = document.querySelector('#canvasElement')
    if (canvas) {
        const context = canvas.getContext('2d');

        // 设置canvas的宽高
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        // 绘制当前视频流到canvas
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // 将canvas转换为base64图片
        const img = canvas.toDataURL('image/png');

        // 可以将img的src设置为base64，展示图片
        users.avatar = img
        db.users.where('username').equals(users.username).modify({ avatar: img })
        setAvatar(img)
    }

    $('#captureModal').modal('hide')

}

const formDetail = ref({
    content: '',
    imageUrl: ''
})

const customFile = ref<HTMLInputElement>()

const submitDetailForm = async () => {
    if (users) {
        const organize = await getOrganize(users.username)
        const organizeDetail = await db.organizeDetail.where('organizeId').equals(Number(organize[0].organizeId)).toArray()
        if (organizeDetail && organizeDetail.length > 0) {
            db.organizeDetail.where('organizeId').equals(Number(organize[0].organizeId)).modify({ content: formDetail.value.content })
        } else {
            db.organizeDetail.add({
                organizeId: Number(organize[0].organizeId),
                content: formDetail.value.content
            })
        }

        const organizeImages = await db.organizeImages.where('organizeId').equals(Number(organize[0].organizeId)).toArray()
        if (organizeImages && organizeImages.length > 0) {
            db.organizeImages.where('organizeId').equals(Number(organize[0].organizeId)).modify({ imageUrl: formDetail.value.imageUrl })
        } else {
            db.organizeImages.add({
                organizeId: Number(organize[0].organizeId),
                imageUrl: formDetail.value.imageUrl
            })
        }
    }

    $('#successModal').modal('show')
}

</script>

<template>
    <div class="col-md-9 col-lg-10" data-aos="fade-up">
        <div class="card mb-3 border-light" data-aos="fade-up">
            <div class="row no-gutters">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-12 text-center">
                            <img class="rounded-circle shadow circle-img" :src="users.avatar" />
                        </div>
                        <div class="col-12 mt-3 text-center">
                            <input ref="fileInput" type="file" placeholder="选择你的文件" style="display: none"
                                accept="image/*" />
                            <button type="button" class="btn btn-primary" @click="fileType">修改</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title">基本资料</h5>
                        <form @submit.prevent="submitForm('first')" v-if="usersTypeId == 1 || usersTypeId == 2">
                            <div class="form-group">
                                <label for="firstRealName">姓名</label>
                                <input type="text" class="form-control" id="firstRealName" placeholder="姓名"
                                    :class="formFirstErr.realName ? 'is-invalid' : ''"
                                    v-model.trim="formFirst.realName" />
                                <div class="invalid-feedback">
                                    {{ formFirstMsg.realName }}
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">修改</button>
                        </form>
                        <form @submit.prevent="submitForm('second')" v-if="usersTypeId == 4">
                            <div class="form-group">
                                <label for="secondRealName">姓名</label>
                                <input type="text" class="form-control" id="secondRealName" placeholder="姓名"
                                    :class="formSecondErr.realName ? 'is-invalid' : ''"
                                    v-model.trim="formSecond.realName" />
                                <div class="invalid-feedback">
                                    {{ formSecondMsg.realName }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="secondSchoolName">学校</label>
                                <input type="text" class="form-control" id="secondSchoolName" readonly="true"
                                    placeholder="学校" v-model.trim="formSecond.schoolName" />
                            </div>
                            <div class="form-group">
                                <label for="secondStudentNumber">学号</label>
                                <input type="text" class="form-control" id="secondStudentNumber" readonly="true"
                                    placeholder="学号" v-model.trim="formSecond.studentNumber" />
                            </div>

                            <div class="form-group">
                                <label for="secondPhoneNumber">手机号</label>
                                <div class="input-group is-invalid">
                                    <input type="text" class="form-control" id="secondPhoneNumber"
                                        :class="formSecondErr.phoneNumber ? 'is-invalid' : ''"
                                        v-model.trim="formSecond.phoneNumber" placeholder="手机号"
                                        @blur="checkPhoneNumber('second')" />
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button"
                                            @click="obtainCode('second')" :disabled="secondVerificationCodeBtnState">
                                            {{ secondVerificationCode }}
                                        </button>
                                    </div>
                                </div>
                                <div class="invalid-feedback" style="display: block">
                                    {{ formSecondMsg.phoneNumber }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="secondCode">验证码</label>
                                <input type="text" class="form-control" id="secondCode"
                                    :class="formSecondErr.code ? 'is-invalid' : ''" v-model.trim="formSecond.code"
                                    placeholder="验证码" @blur="checkCode('second')" />
                                <div class="invalid-feedback">
                                    {{ formSecondMsg.code }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="secondQQ">QQ</label>
                                <input type="text" class="form-control" id="secondQQ" placeholder="QQ"
                                    v-model.trim="formSecond.qq" />
                            </div>
                            <div class="form-group">
                                <label for="secondWX">微信</label>
                                <input type="text" class="form-control" id="secondWX" placeholder="微信"
                                    v-model.trim="formSecond.weixin" />
                            </div>
                            <button type="submit" class="btn btn-primary">修改</button>
                        </form>
                        <form @submit.prevent="submitForm('third')" v-if="usersTypeId == 3">
                            <div class="form-group">
                                <label for="thirdRealName">组织/商家名称</label>
                                <input type="text" class="form-control" readonly="true" id="thirdRealName"
                                    v-model.trim="formThird.realName" />
                            </div>
                            <div class="form-group">
                                <label for="thirdBusinessLicense">组织编码/营业执照</label>
                                <input type="text" class="form-control" readonly="true" id="thirdBusinessLicense"
                                    placeholder="组织编码/营业执照" v-model.trim="formThird.businessLicense" />
                            </div>
                            <div class="form-group">
                                <label for="thirdResponsiblePerson">负责人</label>
                                <input type="text" class="form-control" placeholder="负责人" id="thirdResponsiblePerson"
                                    :class="formThirdErr.responsiblePerson ? 'is-invalid' : ''"
                                    v-model.trim="formThird.responsiblePerson" @blur="checkResponsiblePerson" />
                                <div class="invalid-feedback">
                                    {{ formThirdMsg.responsiblePerson }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="thirdResponsiblePersonPhoneNumber">负责人联系方式</label>
                                <div class="input-group is-invalid">

                                    <input type="text" class="form-control" id="thirdResponsiblePersonPhoneNumber"
                                        :class="formThirdErr.responsiblePersonPhoneNumber ? 'is-invalid' : ''"
                                        v-model.trim="formThird.responsiblePersonPhoneNumber" placeholder="负责人联系方式"
                                        @blur="checkPhoneNumber('third')" />
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button"
                                            @click="obtainCode('third')" :disabled="thirdVerificationCodeBtnState">
                                            {{ thirdVerificationCode }}
                                        </button>
                                    </div>
                                </div>
                                <div class="invalid-feedback" style="display: block">
                                    {{ formThirdMsg.responsiblePersonPhoneNumber }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="thirdCode">验证码</label>
                                <input type="text" class="form-control" id="thirdCode"
                                    :class="formThirdErr.code ? 'is-invalid' : ''" v-model.trim="formThird.code"
                                    placeholder="验证码" @blur="checkCode('third')" />
                                <div class="invalid-feedback">
                                    {{ formThirdMsg.code }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail4">详细地址</label>
                                <input type="text" class="form-control"
                                    :class="formThirdErr.address ? 'is-invalid' : ''" v-model.trim="formThird.address"
                                    placeholder="详细地址" @blur="checkAddress" />
                                <div class="invalid-feedback">
                                    {{ formThirdMsg.address }}
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">修改</button>
                        </form>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">修改详情</h5>
                        <form @submit.prevent="submitDetailForm" v-if="usersTypeId == 3">
                            <div class="form-group">
                                <label for="content">描述</label>
                                <textarea class="form-control" rows="3" placeholder="请简单描述组织"
                                    v-model.trim="formDetail.content"></textarea>
                            </div>
                            <div class="form-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" ref="customFile" placeholder="选择你的文件"
                                        accept="image/*">
                                    <label class="custom-file-label" for="customFile">封面图片</label>
                                </div>
                                <div v-if="formDetail.imageUrl === ''">
                                    <svg class="bd-placeholder-img img-thumbnail" width="200" height="200"
                                        xmlns="http://www.w3.org/2000/svg" role="img"
                                        aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200"
                                        preserveAspectRatio="xMidYMid slice" focusable="false">
                                        <title>A generic square placeholder image with a white border around it, making
                                            it resemble a photograph taken with an old instant camera</title>
                                        <rect width="100%" height="100%" fill="#6c757d"></rect><text x="50%" y="50%"
                                            fill="#dee2e6" dy=".3em">200x200</text>
                                    </svg>
                                </div>
                                <div v-else>
                                    <img :src="formDetail.imageUrl" class="img-thumbnail" alt="详情图片">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">修改</button>
                        </form>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">修改密码</h5>
                        <form @submit.prevent="submitPasswordForm">
                            <div class="form-group">
                                <label for="password">新密码</label>
                                <input type="password" class="form-control" id="password"
                                    :class="formPasswordErr.password ? 'is-invalid' : ''"
                                    v-model.trim="formPassword.password" placeholder="新密码" @blur="checkPasswordBlur" />
                                <div class="invalid-feedback">
                                    {{ formPasswordMsg.password }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="okPassword">确认密码</label>
                                <input type="password" class="form-control" id="okPassword"
                                    :class="formPasswordErr.okPassword ? 'is-invalid' : ''"
                                    v-model.trim="formPassword.okPassword" placeholder="确认密码"
                                    @blur="checkOkPasswordBlur" />
                                <div class="invalid-feedback">
                                    {{ formPasswordMsg.okPassword }}
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">修改</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="successModalLabel">资料更新成功</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    您好，您的资料已更新！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshPage">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--拍照选项-->
    <div class="modal fade" id="fileModal" tabindex="-1" aria-labelledby="fileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="fileModalLabel">文件获取方式</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <button type="button" class="btn btn-primary btn-round btn-block shadow-sm" @click="toCapture">拍
                        照</button>
                    <button type="button" class="btn btn-primary btn-round btn-block shadow-sm"
                        @click="clickFileIput">从本地上传</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="captureModal" tabindex="-1" aria-labelledby="captureModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="captureModalLabel">拍照上传</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <video autoplay playsinline id="videoEle"></video>
                    <canvas style="display: none;" id="canvasElement"></canvas>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="captureButton">拍照</button>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
#videoEle {
    width: 100%;
    /* 宽度自适应 */
    height: auto;
    /* 高度自适应 */
    object-fit: contain;
    /* 保持视频的宽高比例 */
}

.circle-img {
    width: 200px;
    /* 设置图片宽度 */
    height: 200px;
    /* 设置图片高度与宽度相同以保持圆形 */
    object-fit: cover;
    /* 确保图片内容填充整个容器，超出的部分会被裁剪 */
}
</style>